@charset "UTF-8";
/*
 * @title           其它页面网站样式
 * @version         1.0
 * @update          $Date: 2020-12-14
 */
/* default variables
-------------------------------------------------------------- */
/**
 * Mixes a color with white. It's different from lighten()
 *
 * @param {color} $color
 * @param {number (percentage)} $percent [The amout of white to be mixed in]
 * @return {color}
 *
 * @example
 *   .element {
 *     background-color: tint(#6ecaa6 , 40%);
 *   }
 *
 *   // CSS Output
 *   .element {
 *     background-color: #a8dfc9;
 *   }
 */
/**
 * @example scss
 *
 * .element {
 *   @include clearfix;
 * }
 */
/**
 * 元素居中定位
 */
/**
 * 修复小元素文本垂直居中
 */
/**
 * flex 布局
 * ================================================================
 */
/* Flex Item */
/* --------------------------------------------------------------
  primary styles
-------------------------------------------------------------- */
html,
body {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.layout {
  display: flex;
  flex-direction: column;
  padding: 0 25px 0 25px;
}

.bg {
  background: #040c19 url(./../images/background.jpg) no-repeat 50% 0;
  background-size: cover;
}

.chart {
  width: 100%;
  height: 140px;
}

.chart-mwcs {
  height: 210px;
}

.chart-rmm {
  height: 150px;
  border: 1px solid #147896;
}

/*
  header
  ----------------------------------------------------------------- */
#header {
  background-color: rgba(36, 109, 194, 0.4);
  margin-bottom: 15px;
  padding: 15px 0px 15px 30px;
}

/*
  头部面板
----------------------------------------------------------*/
.panel {
  margin-right: 45px;
  width: 305px;
}
.panel-hd {
  margin-bottom: 10px;
}
.panel-hd .logo {
  width: 60px;
  height: 39px;
}
.panel-hd h1 {
  font-size: 36px;
  background-image: -webkit-linear-gradient(bottom, #85d9ff, #85d9ff, #f7fdff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 36px;
  padding-left: 15px;
  white-space: nowrap;
}

.panel-bd-card {
  height: 70px;
  width: 54%;
  margin-left: 10px;
}
.panel-bd-card .card-hd {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: rgba(74, 144, 226, 0.3);
  border-radius: 50%;
}
.panel-bd-card .card-bd {
  padding-left: 10px;
  text-align: center;
}
.panel-bd-card .card-bd .title .number {
  font-weight: 700;
  font-size: 32px;
  line-height: 32px;
}
.panel-bd-card .card-bd .cnt {
  color: #acd4fa;
}

.panel-bd-card-zc {
  width: 46%;
}

/*
 头部卡片
 -----------------------------------------------------------------*/
.card {
  width: 290px;
  height: 115px;
  margin-right: 15px;
}

.card-jg {
  background: url(../images/top-bg1.png) 0 0;
  background-size: cover;
}
.card-jg .card-hd {
  height: 40px;
}
.card-jg .card-bd-cnt {
  width: 261px;
  height: 68px;
  padding: 10px 5px 0px 5px;
  background-color: #0c305d;
  text-align: justify;
  font-size: 12px;
  line-height: 16px;
}

.card-jc {
  background: url(../images/top-bg2.png) 0 0;
  background-size: cover;
}

.card-yx {
  background: url(../images/top-bg3.png) 0 0;
  background-size: cover;
}

.card-time {
  width: 240px;
}
.card-time .card-hd {
  display: inline-block;
  width: 235px;
  background-color: #06264d;
  color: #9ff2ff;
  margin-bottom: 7px;
}
.card-time .card-bd {
  color: #327cc7;
}

/*
 content
 ------------------------------------------------------------------ */
/*
  box 盒子公用
  ----------------------------------------------------------------- */
.box {
  background-color: rgba(36, 109, 194, 0.4);
  padding: 10px 5px;
}
.box-hd {
  margin-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
.box-hd span {
  color: #9ff2ff;
}
.box .hr {
  margin-bottom: 5px;
}
.box-bd {
  padding-left: 5px;
  padding-right: 5px;
}

.box-crzc {
  width: 393px;
  height: 416px;
  margin-bottom: 15px;
}

.mod {
  width: 760px;
}

.box-ldfx,
.box-rmm {
  width: 397px;
  height: 200px;
}

.box-rmm .box-hd {
  margin-bottom: 0px;
}

.box-ldfx {
  margin-bottom: 15px;
}

.box-crxjc {
  width: 677px;
  height: 270px;
}

.box-gwaq {
  width: 444px;
  height: 270px;
  margin: 0 16px;
}

.box-mwcs {
  width: 397px;
  height: 270px;
}

.table {
  width: 100%;
}
.table .thead {
  background-color: rgba(74, 144, 226, 0.4);
}
.table .tr {
  text-align: center;
  height: 35px;
  line-height: 35px;
  width: 100%;
}
.table .tr .td {
  float: left;
}
.table .tr .th {
  float: left;
}

.table-cryc .tbody .tr .ip {
  text-align: left;
  width: 40%;
  color: #9ff2ff;
}
.table-cryc .tbody .tr .name {
  width: 30%;
}
.table-cryc .tbody .tr .status {
  width: 30%;
}
.table-cryc .tbody .tr .status a {
  padding: 4px;
  color: #f8c11c;
  text-align: center;
  background-color: rgba(248, 231, 28, 0.2);
}

.table-crxjc .hr {
  margin-bottom: 10px;
}
.table-crxjc .tbody .status a {
  color: #f8c11c;
}
.table-crxjc .name {
  width: 15%;
}
.table-crxjc .keyword {
  width: 15%;
}
.table-crxjc .ip {
  width: 15%;
}
.table-crxjc .status {
  width: 8%;
}
.table-crxjc .start-time {
  width: 22%;
}
.table-crxjc .content {
  width: 20%;
}

.table-gwaq .name {
  float: left;
  width: 34%;
}
.table-gwaq .sum {
  float: left;
  width: 33%;
}
.table-gwaq .ip {
  float: left;
  width: 30%;
}
.table-gwaq .hr {
  margin-bottom: 10px;
}

/*
 中间部位
 ------------------------------- */
.mod {
  height: 414px;
}
.mod .row {
  height: 100%;
}
.mod .row .col-6 {
  height: 100%;
}
.mod .row .col-12 {
  height: 100%;
}

/*
 小圈
------------------------------------ */
.small-circle-box {
  width: 80px;
  height: 80px;
  position: relative;
}
.small-circle-box .box-hd .rotate {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 80px;
  height: 80px;
}
.small-circle-box .box-hd .rotate:hover {
  animation: turn 1s linear 1;
}
.small-circle-box .box-hd .border-dotted {
  position: absolute;
  width: 64px;
  top: 8px;
  left: 8px;
  z-index: 2;
}
.small-circle-box .box-bd {
  width: 100%;
  height: 100%;
}
.small-circle-box .box-bd .number {
  z-index: 3;
  font-size: 36px;
  font-weight: 700;
}
.small-circle-box .box-bd .text {
  z-index: 3;
  position: absolute;
  width: 100px;
  top: 90px;
  left: 0;
  font-size: 16px;
  color: #9ff2ff;
}
.small-circle-box .box-bd .text-ldfx {
  left: 10px;
}
.small-circle-box .box-bd .text-rmm {
  left: 15px;
}

/*
 大圈
------------------------------------ */
.big-circle-box {
  position: relative;
  width: 390px;
  height: 398px;
}
.big-circle-box .box-hd img {
  position: absolute;
  top: 0;
  left: 0;
}
.big-circle-box .box-hd .tc-map {
  top: 60px;
  left: 60px;
  z-index: 0;
}
.big-circle-box .box-hd .halo {
  z-index: 1;
}
.big-circle-box .box-hd .rotate {
  z-index: 5;
  top: 24px;
  left: 26px;
}
.big-circle-box .box-hd img.rotate:hover {
  animation: turn 1s linear 1;
}
.big-circle-box .box-hd .rotate-circle {
  z-index: 3;
  top: 38px;
  left: 200px;
  height: 160px;
  width: 116px;
  transform-origin: 0 100%;
  animation: turnone 4s linear infinite;
}
.big-circle-box .box-bd {
  width: 100%;
  height: 100%;
}
.big-circle-box .box-bd .number {
  font-size: 72px;
  font-weight: 700;
  z-index: 4;
}
.big-circle-box .box-bd .text {
  position: absolute;
  font-size: 18px;
  top: 240px;
  left: 150px;
  z-index: 4;
}